<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>用户注册</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css}">
    <script src="/js/layui/layui.js}"></script>
    <link rel="stylesheet" href="/css/register.css}">
</head>
<body id="page">
<div class="layui-card">
    <div class="layui-card-header" align="center">欢迎注册--京巴平台</div>
    <div class="layui-card-body">
        <form class="layui-form" id="user_register_action" action="/user/register_action" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
                <div class="input-div">
                    <i class="layui-icon layui-icon-username" style="font-size: 20px; color: #1E9FFF;"></i>
                    <input type="text" id="username_input" name="username" required lay-verify="required"
                           placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" id="mm">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                <div class="input-div">
                    <i class="layui-icon layui-icon-password" style="font-size: 20px; color: #1E9FFF;"></i>
                    <input type="password" id="password_input" name="uPassword" required lay-verify="required"
                           placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" id="rmm">确认密码</label>
                <div class="input-div">
                    <i class="layui-icon layui-icon-password" style="font-size: 20px; color: #1E9FFF;"></i>
                    <input type="password" id="confirm_password_input" required lay-verify="required"
                           placeholder="请输入确认密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验&nbsp;&nbsp;证&nbsp;&nbsp;码</label>
                <div class="input-div">
                    <i class="layui-icon layui-icon-vercode" style="font-size: 20px; color: #1E9FFF;"></i>
                    <input type="password" id="verifyCode_input" required lay-verify="required" placeholder="输入验证码"
                           autocomplete="off" class="layui-input">
                    <div style="padding-top: 2px">
                        <img id="captcha_img" src="/randomCode" width="96px" height="34px"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" align="center">
                <a class="layui-btn layui-btn-radius" href="login.jsp">登录</a>
                <button type="button" id="user_register" class="layui-btn layui-btn-radius">注册</button>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    layui.use(['layer', 'jquery'], function () {
        const $ = layui.jquery;
        const layer = layui.layer;
        const contextPath = /*[[@{/}]]*/'';  //获取上下文路径
        const username_input = $('#username_input');
        const password_input = $('#password_input');
        const confirm_password_input = $('#confirm_password_input');
        const user_register = $('#user_register');
        const verifyCode_input = $('#verifyCode_input');
        let password = "";
        let username = "";
        let confirm_password = "";
        $(() => {     //入口函数
            username_input.focus(() => {  //用户名输入框获得焦点时,进行格式提醒
                let prompt = '设置后不可更改,中英文均可,最长14个英文或7个汉字'
                layer.tips(prompt, username_input, {
                    tips: [2, '#262223'] //还可配置颜色
                });
            });

            username_input.blur(() => {       //用户名输入框失去焦点时,进行判空
                username = username_input.val();
                if (username !== "" && $.trim(username) !== "") {   //用户名判空
                    $.post({
                        url: `${contextPath}user/isUsernameExist`,
                        data: {username: username},
                        success: (msg) => {
                            if (msg === "ok") {
                                layer.tips(msg, username_input, {
                                    tips: [2, '#8be592'] //还可配置颜色
                                });
                            } else {
                                layer.tips(msg, username_input, {
                                    tips: [1, '#d80f3e', {icon: 5}] //还可配置颜色
                                });
                            }
                        },
                    });
                }
            });

            password_input.focus(() => {  //密码输入框获得焦点时,进行格式提醒
                let prompt = '1.长度为8~14个字符   2.字母/数字以及标点符号至少包含2种    3.不允许有空格、中文'
                layer.tips(prompt, password_input, {
                    tips: [2, '#262223'],//还可配置颜色
                    area: 'auto'
                });
            });


            confirm_password_input.blur(() => {  //确认密码输入框失去焦点时,进行密码对比,两次输入是否一直
                confirm_password = confirm_password_input.val()
                if (password !== "" && confirm_password !== "" && password !== confirm_password) {
                    //confirm_password_input.focus();  //获取输入框焦点
                    layer.tips('两次密码输入不一样!', confirm_password_input, {
                        tips: [1, '#d80f3e'] //还可配置颜色
                    });
                    return false;
                }
            });

            user_register.click(() => {   //注册按钮点击事件

                password = password_input.val();
                if (password.length < 8 || password.length > 14) {
                    //password_input.focus();  //获取输入框焦点
                    layer.tips('密码长度为8~14位!', password_input, {
                        tips: [1, '#d80f3e'] //还可配置颜色
                    });
                    return false;
                }

                let verifyCode = verifyCode_input.val()
                if (verifyCode.length !== 4) {
                    verifyCode_input.focus();
                    layer.tips('请输入四位验证码', verifyCode_input, {
                        tips: [2, '#262223'] //还可配置颜色
                    });
                    return false;
                }


                if (verifyCode !== "" || $.trim(verifyCode) !== "") {
                    $.post({
                        url: `${contextPath}user/userRegisterVerify`,
                        data: {authCode: verifyCode},
                        success: (msg) => {
                            if (msg !== "ok") {
                                verifyCode_input.focus()
                                layer.tips(msg, verifyCode_input, {
                                    tips: [1, '#d80f3e']
                                })
                            } else {
                                layer.alert('注册成功点击确认自动登录', {icon: 6});
                                $('#user_register_action').submit(); //验证成功,提交表单

                            }
                        }
                    })
                }

            });
        });

        //验证码刷新
        $('#captcha_img').click(() => {
            let src = $('#captcha_img').attr('src') + "?time=" + new Date().getTime();
            $("#captcha_img").prop("src", src);
        })
    });

</script>
</body>
</html>